// 准备联名款数据
const jointly =[
    { URL:'../img/cakes/product/jointly/cakes1.jpg' ,pname:'好利来×LINE FRIENDS联名款 minini萌趣乐园',price:' ¥ 239.00' },
    { URL:'../img/cakes/product/jointly/cakes2.jpg' ,pname:'哈利波特联名 霍格沃茨城堡',price:' ¥ 329.00' },
    { URL:'../img/cakes/product/jointly/cakes3.jpg' ,pname:'哈利波特联名 预言家日报',price:' ¥ 299.00' },
    { URL:'../img/cakes/product/jointly/cakes4.jpg' ,pname:'三丽鸥联名 美乐蒂野餐趴',price:' ¥ 329.00' },
    { URL:'../img/cakes/product/jointly/cakes5.jpg' ,pname:'三丽鸥联名 美乐蒂梦幻乐园',price:' ¥ 299.00' },
    { URL:'../img/cakes/product/jointly/cakes6.jpg' ,pname:'三丽鸥联名 大耳狗云上派对',price:' ¥ 299.00' },
    { URL:'../img/cakes/product/jointly/cakes7.jpg' ,pname:'三丽鸥联名 大耳狗天空茶会',price:' ¥ 299.00' },
    { URL:'../img/cakes/product/jointly/cakes8.jpg' ,pname:'迪士尼草莓熊联名 “莓”开眼笑',price:' ¥ 299.00' },
    { URL:'../img/cakes/product/jointly/cakes9.jpg' ,pname:'迪士尼草莓熊联名 遇见“莓”好',price:' ¥ 299.00' },
    { URL:'../img/cakes/product/jointly/cakes10.jpg' ,pname:'LINE FRIENDS联名 布朗可妮莓果园',price:' ¥ 239.00' },
    { URL:'../img/cakes/product/jointly/cakes11.jpg' ,pname:'LINE FRIENDS联名 布朗可妮巧乐园',price:' ¥ 269.00' },
    { URL:'../img/cakes/product/jointly/cakes12.jpg' ,pname:'迪士尼巴斯光年联名 飞船启航',price:' ¥ 299.00' },
    { URL:'../img/cakes/product/jointly/cakes13.jpg' ,pname:'迪士尼巴斯光年联名 星际战警',price:' ¥ 299.00' },
    { URL:'../img/cakes/product/jointly/cakes14.jpg' ,pname:'迪士尼巴斯光年联名 星际之旅',price:' ¥ 299.00' },
    { URL:'../img/cakes/product/jointly/cakes15.jpg' ,pname:'三丽鸥联名 酷洛米暗夜城堡',price:' ¥ 299.00' },
    { URL:'../img/cakes/product/jointly/cakes16.jpg' ,pname:'三丽鸥联名 摇滚甜心酷洛米',price:' ¥ 279.00' },
    { URL:'../img/cakes/product/jointly/cakes17.jpg' ,pname:'奥特曼联名款 大决战！迪迦奥特曼',price:' ¥ 399.00' },
    { URL:'../img/cakes/product/jointly/cakes18.jpg' ,pname:'奥特曼联名款 光之巨人!迪迦奥特曼',price:' ¥ 399.00' },
    { URL:'../img/cakes/product/jointly/cakes19.jpg' ,pname:'宝可梦联名款 皮卡丘与精灵球款',price:' ¥ 299.00' },
    { URL:'../img/cakes/product/jointly/cakes20.jpg' ,pname:'宝可梦联名款 可达鸭乐园款',price:' ¥ 299.00' },
    { URL:'../img/cakes/product/jointly/cakes21.jpg' ,pname:'宝可梦联名款 小火龙火山款',price:' ¥ 299.00' },

]

function products(a) {
// 获取父节点
const cakeProduct = document.querySelector('.cakes-product')

// 开始先清空容器内容
cakeProduct.innerHTML = ''

// for循环遍历
for(let item of a){
    // 创建商品盒子
    const goodsCard = document.createElement('div')
    // 添加面具盒子
    const backMask = document.createElement('div')
    // 添加图片
    const img = document.createElement('img')
    // 添加商品信息
    const goodsInfo = document.createElement('div')
    // 添加信息左侧
    const left = document.createElement('div')
    // 添加商品名
    const cakeName = document.createElement('div')
    // 添加奶油备注
    const subTitle = document.createElement('div')
    // 添加价格栏目
    const cakeprice = document.createElement('div')
    // 添加价格
    const price = document.createElement('span')
    // 添加“起”小字
    const extra = document.createElement('b')
    // 添加右侧信息
    const right = document.createElement('div')
    // 添加一个空盒子tags
    const tags = document.createElement('div')
    // 添加购买按钮
    const button = document.createElement('div')
    // 添加购买按钮的字样
    const buy = document.createElement('span')

    // 把各个盒子层级封装
    goodsCard.append(img)
    goodsCard.append(backMask)
    goodsCard.append(goodsInfo)
    goodsInfo.append(left)
    goodsInfo.append(right)
    left.append(cakeName)
    left.append(subTitle)
    left.append(cakeprice)
    cakeprice.append(price)
    cakeprice.append(extra)
    right.append(tags)
    right.append(button)
    button.append(buy)

    // 给盒子加类名
    goodsCard.classList.add('goods-card')
    backMask.classList.add('backMask')
    goodsInfo.classList.add('goods-card-info')
    img.classList.add('product-img')
    left.classList.add('left')
    cakeName.classList.add('cake-title')
    subTitle.classList.add('subTitle')
    cakeprice.classList.add('cake-price')
    price.classList.add('base-price')
    extra.classList.add('extra')
    right.classList.add('right')
    tags.classList.add('tags')
    button.classList.add('buy-button')
    buy.classList.add('buy')


    // 给商品名字修改
    cakeName.innerHTML = `${item.pname}`;
    // 给base-price渲染价格
    price.innerHTML = `${item.price}`;
    extra.innerHTML = '起';
    buy.innerHTML = '购买';
    img.src = item.URL
    subTitle.innerHTML = '淡奶油'
    cakeProduct.append(goodsCard)

}
}

products(jointly)


// 点击时间获取jointly商品
document.querySelector('.jointly').addEventListener("click",function(){
    products(jointly)
})


// 编写hot商品信息
const hots =[
    { URL:'../img/cakes/product/hot/hot1.jpg' ,pname:'圣诞贴贴',price:' ¥ 199.00' },
    { URL:'../img/cakes/product/hot/hot2.jpg' ,pname:'半熟芝士生日蛋糕系列',price:' ¥ 189.00' },
    { URL:'../img/cakes/product/hot/hot3.jpg' ,pname:'一起跳舞吧',price:' ¥ 209.00' },
    { URL:'../img/cakes/product/hot/hot4.jpg' ,pname:'软萌精灵',price:' ¥ 209.00' },
    { URL:'../img/cakes/product/hot/hot5.jpg' ,pname:'朵朵情歌',price:' ¥ 209.00' },
    { URL:'../img/cakes/product/hot/hot6.jpg' ,pname:'朵朵甜心',price:' ¥ 209.00' },
    { URL:'../img/cakes/product/hot/hot7.jpg' ,pname:'花漾甜心',price:' ¥ 269.00' },
    { URL:'../img/cakes/product/hot/hot8.jpg' ,pname:'哈利波特联名 霍格沃茨城堡',price:' ¥ 329.00' },
    { URL:'../img/cakes/product/hot/hot9.jpg' ,pname:'哈利波特联名 预言家日报',price:' ¥ 299.00' },
    { URL:'../img/cakes/product/hot/hot10.jpg' ,pname:'奥特曼联名款 去战斗!迪迦奥特曼',price:' ¥ 299.00' },
    { URL:'../img/cakes/product/hot/hot11.jpg' ,pname:'奥特曼联名款 大决战！迪迦奥特曼',price:' ¥ 399.00' },
    { URL:'../img/cakes/product/hot/hot12.jpg' ,pname:'迪士尼草莓熊联名 “莓”开眼笑',price:' ¥ 299.00' },

]


// 添加点击事件获取Hot商品
document.querySelector('.hot').addEventListener("click",function(){
    products(hots)
})




// 添加classic的商品信息
const classic = [
    { URL:'../img/cakes/product/classic/class1.jpg' ,pname:'半熟芝士生日蛋糕系列',price:' ¥ 189.00' },
    { URL:'../img/cakes/product/classic/class2.jpg' ,pname:'风韵花舞',price:' ¥ 239.00' },
    { URL:'../img/cakes/product/classic/class3.jpg' ,pname:'锦韵琼花',price:' ¥ 299.00' },
    { URL:'../img/cakes/product/classic/class4.jpg' ,pname:'生生之丘',price:' ¥ 239.00' },
    { URL:'../img/cakes/product/classic/class5.jpg' ,pname:'星月山海',price:' ¥ 239.00' },
    { URL:'../img/cakes/product/classic/class6.jpg' ,pname:'缤果奇梦',price:' ¥ 199.00' },
    { URL:'../img/cakes/product/classic/class7.jpg' ,pname:'珍果满园',price:' ¥ 199.00' },
    { URL:'../img/cakes/product/classic/class8.jpg' ,pname:'花漾莓果',price:' ¥ 269.00' },
    { URL:'../img/cakes/product/classic/class9.jpg' ,pname:'春田花语',price:' ¥ 269.00' },
    { URL:'../img/cakes/product/classic/class10.jpg' ,pname:'芳果缤纷',price:' ¥ 199.00' },
    { URL:'../img/cakes/product/classic/class11.jpg' ,pname:'缤纷果漾',price:' ¥ 269.00' },
    { URL:'../img/cakes/product/classic/class12.jpg' ,pname:'富贵兔兔',price:' ¥ 299.00' },
]

// 添加点击事件获取classic商品
document.querySelector('.classic').addEventListener("click",function(){
    products(classic)
})


// 添加child的商品信息
const child = [
    { URL:'../img/cakes/product/child/child1.jpg' ,pname:'欢乐起航',price:' ¥ 299.00' },
    { URL:'../img/cakes/product/child/child2.jpg' ,pname:'小小飞行员',price:' ¥ 299.00' },
    { URL:'../img/cakes/product/child/child3.jpg' ,pname:'欢乐牧场',price:' ¥ 299.00' },
    { URL:'../img/cakes/product/child/child4.jpg' ,pname:'甜蜜花园',price:' ¥ 199.00' },
    { URL:'../img/cakes/product/child/child5.jpg' ,pname:'甜蜜小家',price:' ¥ 299.00' },
    { URL:'../img/cakes/product/child/child6.jpg' ,pname:'天真烂漫',price:' ¥ 299.00' },
    { URL:'../img/cakes/product/child/child7.jpg' ,pname:'快乐成长',price:' ¥ 199.00' },
    { URL:'../img/cakes/product/child/child8.jpg' ,pname:'萌猫乐园',price:' ¥ 199.00' },
    { URL:'../img/cakes/product/child/child9.jpg' ,pname:'彩虹天使',price:' ¥ 209.00' },
    { URL:'../img/cakes/product/child/child10.jpg' ,pname:'小小旅行家',price:' ¥ 299.00' },
]

// 添加点击事件获取child商品
document.querySelector('.child').addEventListener("click",function(){
    products(child)
})


// 添加loving的商品信息
const loving =[
    { URL:'../img/cakes/product/loving/loving1.jpg' ,pname:'福寿绵长',price:' ¥ 429.00' },
    { URL:'../img/cakes/product/loving/loving2.jpg' ,pname:'福桃贺寿',price:' ¥ 999.00' },
    { URL:'../img/cakes/product/loving/loving3.jpg' ,pname:'长乐永康',price:' ¥ 299.00' },
]

// 添加点击事件获取loving商品
document.querySelector('.loving').addEventListener("click",function(){
    products(loving)
})


// 导航栏点击事件添加
//下划线
const one = document.querySelector('.active-one')
const two = document.querySelector('.active-two')
const three = document.querySelector('.active-three')
const four = document.querySelector('.active-four')
const five = document.querySelector('.active-five')
// 阴影
const a = document.querySelector('.mask-one')
const b = document.querySelector('.mask-two')
const c = document.querySelector('.mask-three')
const d = document.querySelector('.mask-four')
const e = document.querySelector('.mask-five')

// 点击联名款
const lianming = document.querySelector('.jointly');
lianming.addEventListener('click',function(){
    products(jointly);

    two.classList.remove('active')
    one.classList.add('active')
    three.classList.remove('active')
    four.classList.remove('active')
    five.classList.remove('active')

    b.classList.remove('mask')
    a.classList.add('mask')
    c.classList.remove('mask')
    d.classList.remove('mask')
    e.classList.remove('mask')
})

// 点击热销款
const rexiao = document.querySelector('.hot')
rexiao.addEventListener('click',function(){
    products(hots)

    two.classList.add('active')
    one.classList.remove('active')
    three.classList.remove('active')
    four.classList.remove('active')
    five.classList.remove('active')

    b.classList.add('mask')
    a.classList.remove('mask')
    c.classList.remove('mask')
    d.classList.remove('mask')
    e.classList.remove('mask')
})

// 点击经典款
const jingdian = document.querySelector('.classic')
jingdian.addEventListener('click',function(){
    products(classic)

    two.classList.remove('active')
    one.classList.remove('active')
    three.classList.add('active')
    four.classList.remove('active')
    five.classList.remove('active')

    b.classList.remove('mask')
    a.classList.remove('mask')
    c.classList.add('mask')
    d.classList.remove('mask')
    e.classList.remove('mask')
})

// 点击儿童系列
const ertong = document.querySelector('.child')
ertong.addEventListener('click',function(){
    products(child)

    two.classList.remove('active')
    one.classList.remove('active')
    three.classList.remove('active')
    four.classList.add('active')
    five.classList.remove('active')

    b.classList.remove('mask')
    a.classList.remove('mask')
    c.classList.remove('mask')
    d.classList.add('mask')
    e.classList.remove('mask')
})

// 点击尊爱系列
const love = document.querySelector('.loving')
love.addEventListener('click',function(){
    products(loving)

    two.classList.remove('active')
    one.classList.remove('active')
    three.classList.remove('active')
    four.classList.remove('active')
    five.classList.add('active')

    b.classList.remove('mask')
    a.classList.remove('mask')
    c.classList.remove('mask')
    e.classList.add('mask')
    d.classList.remove('mask')
})